<template>
  <div class="leave-detail-page">
    <!-- 导航栏 -->
    <NavBar title="请假详情" />
    
    <!-- 内容区域 -->
    <div class="page-content" v-if="leave">
      <!-- 请假信息 -->
      <div class="leave-detail card">
        <!-- 状态标识 -->
        <div class="status-badge" :class="leave.status">
          {{ getStatusText(leave.status) }}
        </div>
        
        <!-- 请假标题 -->
        <h1 class="leave-title">{{ leave.title }}</h1>
        
        <!-- 基本信息 -->
        <div class="leave-info">
          <div class="info-item">
            <van-icon name="bookmark-o" size="16" />
            <span class="label">请假类型:</span>
            <span class="value">{{ leave.type }}</span>
          </div>
          <div class="info-item">
            <van-icon name="clock-o" size="16" />
            <span class="label">开始时间:</span>
            <span class="value">{{ leave.startDate }}</span>
          </div>
          <div class="info-item">
            <van-icon name="clock-o" size="16" />
            <span class="label">结束时间:</span>
            <span class="value">{{ leave.endDate }}</span>
          </div>
          <div class="info-item">
            <van-icon name="phone-o" size="16" />
            <span class="label">联系方式:</span>
            <span class="value contact">{{ leave.contactWay }}</span>
          </div>
        </div>
        
        <!-- 请假原因 -->
        <div class="leave-reason">
          <h3>请假原因</h3>
          <p>{{ leave.reason }}</p>
        </div>
        
        <!-- 附件 -->
        <div class="leave-attachments" v-if="leave.attachments && leave.attachments.length">
          <h3>相关附件</h3>
          <div class="attachments-list">
            <div 
              v-for="(file, index) in leave.attachments" 
              :key="index"
              class="attachment-item"
              @click="downloadFile(file)"
            >
              <van-icon name="description" size="20" />
              <span class="filename">附件{{ index + 1 }}</span>
              <van-icon name="arrow" size="16" />
            </div>
          </div>
        </div>
        
        <!-- 申请人信息 -->
        <div class="applicant-info">
          <div class="applicant-header">
            <img :src="leave.userAvatar || '/images/default-avatar.png'" alt="头像" class="avatar" />
            <div class="applicant-details">
              <div class="nickname">{{ leave.userNickname }}</div>
              <div class="apply-time">申请时间：{{ formatTime(leave.createTime) }}</div>
            </div>
          </div>
        </div>
        
        <!-- 审批记录 -->
        <div class="approval-records" v-if="leave.approvalRecords && leave.approvalRecords.length">
          <h3>审批记录</h3>
          <div class="records-list">
            <div 
              v-for="record in leave.approvalRecords" 
              :key="record.id"
              class="record-item"
            >
              <div class="record-header">
                <div class="approver">{{ record.approverName }}</div>
                <div class="record-status" :class="record.status">
                  {{ getStatusText(record.status) }}
                </div>
              </div>
              <div class="record-time">{{ formatTime(record.createTime) }}</div>
              <div class="record-comment" v-if="record.comment">
                {{ record.comment }}
              </div>
            </div>
          </div>
        </div>
        
        <!-- 底部统计 -->
        <div class="leave-stats">
          <span class="stat-item">
            <van-icon name="eye-o" size="16" />
            浏览 {{ leave.viewCount }}
          </span>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="action-section" v-if="canOperate">
        <van-button 
          v-if="leave.status === 'pending'"
          type="danger" 
          size="large" 
          round 
          block
          @click="handleCancel"
        >
          撤销申请
        </van-button>
      </div>
    </div>
    
    <!-- 加载状态 -->
    <van-loading v-else class="loading-center" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { showToast, showConfirmDialog } from 'vant'
import NavBar from '@/components/Common/NavBar.vue'
import { leaveApi } from '@/api'
import { useUserStore } from '@/stores/user'
import type { LeaveApplication } from '@/types'
import { formatTime } from '@/utils/time'

const route = useRoute()
const userStore = useUserStore()
const leaveId = route.params.id as string

// 响应式数据
const leave = ref<LeaveApplication | null>(null)

// 计算属性
const canOperate = computed(() => {
  return leave.value && leave.value.userId === userStore.userInfo?.id
})

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: '待审批',
    approved: '已通过',
    rejected: '已拒绝',
    cancelled: '已撤销'
  }
  return statusMap[status] || status
}

// 加载请假详情
const loadLeave = async () => {
  try {
    const response = await leaveApi.getDetail(leaveId)
    leave.value = response.data
  } catch (error) {
    showToast('加载失败')
    console.error('加载请假详情失败:', error)
  }
}

// 撤销申请
const handleCancel = async () => {
  try {
    await showConfirmDialog({
      title: '确认撤销',
      message: '确定要撤销这个请假申请吗？'
    })
    
    await leaveApi.cancel(leaveId)
    showToast('撤销成功')
    loadLeave() // 重新加载数据
  } catch (error) {
    if (error !== 'cancel') {
      showToast('撤销失败')
      console.error('撤销申请失败:', error)
    }
  }
}

// 下载文件
const downloadFile = (fileUrl: string) => {
  window.open(fileUrl, '_blank')
}

// 页面加载时获取数据
onMounted(() => {
  loadLeave()
})
</script>

<style scoped>
.leave-detail-page {
  min-height: 100vh;
  background-color: #f1f1f1;
}

.page-content {
  padding: 16px;
  padding-bottom: 80px;
}

.leave-detail {
  margin-bottom: 16px;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 16px;
}

.status-badge.pending {
  background-color: #fff3cd;
  color: #856404;
}

.status-badge.approved {
  background-color: #d4edda;
  color: #155724;
}

.status-badge.rejected {
  background-color: #f8d7da;
  color: #721c24;
}

.status-badge.cancelled {
  background-color: #e2e3e5;
  color: #383d41;
}

.leave-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.leave-info {
  margin-bottom: 24px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  color: #666;
  width: 80px;
}

.value {
  color: #333;
  flex: 1;
}

.contact {
  color: #636DEA;
  font-weight: 500;
}

.leave-reason {
  margin-bottom: 24px;
}

.leave-reason h3,
.leave-attachments h3,
.approval-records h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.leave-reason p {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

.leave-attachments {
  margin-bottom: 24px;
}

.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.attachment-item:hover {
  background: #e9ecef;
}

.filename {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.applicant-info {
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.applicant-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.applicant-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nickname {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.apply-time {
  font-size: 12px;
  color: #999;
}

.approval-records {
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.record-item {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.approver {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.record-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 8px;
}

.record-status.approved {
  background-color: #d4edda;
  color: #155724;
}

.record-status.rejected {
  background-color: #f8d7da;
  color: #721c24;
}

.record-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.record-comment {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

.leave-stats {
  display: flex;
  gap: 20px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
}

.action-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: white;
  border-top: 1px solid #f0f0f0;
}

.loading-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>